<template>
  <j-select-biz-component :width="1300"  :query-config="selectStudentQueryConfig" v-bind="configs" v-on="$listeners"/>
</template>

<script>
  import JSelectBizComponent from '@/components/jeecgbiz/JSelectBizComponent'

  export default {
    name: 'JSelectStudent',
    components: { JSelectBizComponent },
    props: ['value','courseId'],
    data() {
      let lUrl = '/sistersophie/studentInfo/course/list?courseId=' + this.courseId;
      return {
        selectStudentQueryConfig: [
           {key: 'lastName', label: 'Last Name'},
        ],
        settings: {
          multiple:true,
          name: 'Student',
          returnId:false,
          displayKey: 'studentName',
          showMoreQueryItems:true,
          returnKeys: ['id','studentName','firstName','lastName'],
          listUrl: lUrl,
          queryParamCode: 'firstName',
          queryParamText: 'First Name',
          columns: [
            { title: 'ID', dataIndex: 'id', align: 'center', width: '9%' },
            { title: 'Chinese/WeChat Name', dataIndex: 'chineseName', align: 'center', width: '25%' },
            { title: 'First Name', dataIndex: 'firstName', align: 'center', width: '18%' },
            { title: 'Last Name', dataIndex: 'lastName', align: 'center', width: '18%' },
            { title: 'School', dataIndex: 'school', align: 'center', width: '15%' },
            { title: 'Grade', dataIndex: 'grade_dictText', align: 'center', width: '15%' },
          ],
        }
      }
    },
    computed: {
      configs() {
        return Object.assign({ value: this.value }, this.settings, this.$attrs)
      }
    }
  }
</script>

<style lang="less" scoped></style>